<template>
  <div style="overflow: hideen">
    <div style="float: left">
      <Product
        v-for="(item, idx) in list"
        :key="item.id"
        :title="item.proname"
        :price="item.proprice"
        :intro="item.info"
        :index="idx"
        @subPrice="fn"
      ></Product>
    </div>
    <div style="float: left">
      <List :arr="list"></List>
    </div>
  </div>
</template>

<script>
import Product from "./components/myProduct_sub.vue";
import List from "./components/list.vue";
export default {
  components: {
    Product,
    List,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾，全场八折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "开业大酬宾，全场7折",
        },
        {
          id: 3,
          proname: "超级好吃的冰激凌",
          proprice: 14.2,
          info: "开业大酬宾，全场6折",
        },
      ],
    };
  },
  methods: {
    fn(index, price) {
      this.list[index].proprice > 1 &&
        (this.list[index].proprice = (
          this.list[index].proprice - price
        ).toFixed(2));
    },
  },
};
</script>

<style>
</style>